<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .mian {
            width: 100vw;
            height: 100vh;
            display: grid;
            grid-template-columns:minmax(100px,400px) minmax(300px,1fr);
            grid-template-areas:
                "catalogItem contentsItem01"
                "null contentsItem02"
                "null contentsItem03";
           column-gap: 10px;
        }

        .catalogItem,
        [class^=contentsItem] {
            border-radius: 10px;
            border: 1px solid grey;
        }

        [class^=contentsItem] {
            width: auto;
            height: 200px;
        }

        .catalogItem {
            width: 350px;
            height: 200px;
            grid-area: catalogItem;
        }

        .contentsItem01 {
            grid-area: contentsItem01;
        }

        .contentsItem02 {
            grid-area: contentsItem02;
        }

        .contentsItem03 {
            grid-area: contentsItem03;
        }

        @media screen and (max-width : 700px) {
            .mian {
                grid-template-rows: repeat(4, 1fr);
                row-gap: 10px;
                grid-template-columns: 1fr;
                grid-template-areas:
                    "catalogItem"
                    "contentsItem01"
                    "contentsItem02"
                    "contentsItem03";
            }
            .catalogItem,
            [class^=contentsItem]{
                width: auto;
            }
        }
    </style>
</head>

<body>
    <div class="mian">
        <div class="catalogItem">
            <h2>目录</h2>
            <ol>
                <li><a href="#">引言</a></li>
                <li><a href="#">第一章</a></li>
                <li><a href="#">第二章</a></li>
            </ol>
        </div>
        <div class="contentsItem01">
            <h2>引言</h2>
            <p>123123123123>>></p>
        </div>
        <div class="contentsItem02">
            <h2>第一章</h2>
            <p>123123123123>>></p>
        </div>
        <div class="contentsItem03">
            <h2>第二章</h2>
            <p>123123123123>>></p>
        </div>
    </div>
</body>

</html>